﻿import {Component} from 'angular2/core'
import {TodoStore} from '../services/store';
import {OrderBy} from "../services/orderBy"
import {GroupBy} from "../services/groupBy"
import {Todo} from '../domain/todo';


@Component({
    selector: 'todo-app',
    templateUrl: 'app/components/todo.html',
    pipes: [OrderBy ,GroupBy]
})

export default class TodoApp {
    todoStore: TodoStore;
    newTodoText = '';

    constructor(todoStore: TodoStore) {
        this.todoStore = todoStore;
    }

    stopEditing(todo: Todo, editedTitle: string) {
        todo.Title = editedTitle;
        todo.Editing = false;
    }

    cancelEditingTodo(todo: Todo) {
        todo.Editing = false;
    }

    updateEditingTodo(todo: Todo, editedTitle: string) {
        editedTitle = editedTitle.trim();
        todo.Editing = false;

        if (editedTitle.length === 0) {
            return this.todoStore.remove(todo);
        }

        todo.Title = editedTitle;
        this.todoStore.update(todo);
    }

    editTodo(todo: Todo) {
        todo.Editing = true;
    }

    removeCompleted() {
        this.todoStore.removeCompleted();
    }

    toggleCompletion(todo: Todo) {
        this.todoStore.toggleCompletion(todo);
    }

    remove(todo: Todo) {
        this.todoStore.remove(todo);
    }

    addTodo() {
        if (this.newTodoText.trim().length) {
            this.todoStore.add(this.newTodoText);
            this.newTodoText = '';
        }
    }

    changeTodos(deviceValue) {
        this.todoStore.get(false, deviceValue);
    }

}

